<% layout('/layouts/default.html', {title: '路由器设备管理', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-notebook"></i> ${text('路由器设备管理')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
				<a href="#" class="btn btn-primary" id="shuaxin" onclick="shuaxin()" title="${text('刷新')}"><i class="fa fa-refresh"></i> ${text('刷新')}</a>
				<a href="#" class="btn btn-primary" id="shuaxinLine" onclick="shuaxinLine()" title="${text('刷新网络信息')}"><i class="fa fa-refresh"></i> ${text('刷新网络信息')}</a>
				<% if(hasPermi('rt:rtDevice:edit')){ %>
					<a href="${ctx}/rt/rtDevice/form" class="btn btn-default btnTool" title="${text('新增路由器设备')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
				<% } %>
				<a href="#" class="btn btn-default" id="btnSetting" title="${text('设置')}"><i class="fa fa-navicon"></i></a>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${rtDevice}" action="${ctx}/rt/rtDevice/listData" method="post" class="form-inline hide"
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				<#form:hidden path="shengchanStatus"/>
				<div class="form-group">
					<label class="control-label">${text('设备号')}：</label>
					<div class="control-inline">
						<#form:input path="sn" maxlength="255" class="form-control width-120"/>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label">${text('MAC')}：</label>
					<div class="control-inline">
						<#form:input path="mac" maxlength="255" class="form-control width-120"/>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label">${text('设备状态')}：</label>
					<div class="control-inline width-120">
						<#form:select path="online" blankOption="true" dictType="rt_online_code" class="form-control " />
					</div>
				</div>

				<div class="form-group">
					<label class="control-label">${text('序列号')}：</label>
					<div class="control-inline">
						<#form:input path="xuliehao" maxlength="100" class="form-control width-120"/>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label">${text('绑定用户')}：</label>
					<div class="control-inline">
						<#form:input path="mobile" maxlength="100" class="form-control width-120"/>
					</div>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm isQuick">${text('重置')}</button>
				</div>
			</#form:form>
			<table id="dataGrid"></table>
			<div id="dataGridPage"></div>
		</div>
	</div>
</div>
<% } %>
<script type="text/template" id="tanchuang">
	<div style="text-align: center">
		<img src="" id="tupian">
	</div>
</script>
<script type="text/template" id="setQuyuxianzhi">
	<form id="inputForm" action="${ctx}/rt/rtDevice/save" method="post" enctype="multipart/form-data"
		  class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
		<div class="row">
			<div class="col-xs-12 col-xs-offset-1">
				<input type="hidden" id="id" name="id" class="form-file"/>
				<label class="control-label col-sm-1" title="">
					<span class="required hide">*</span> <i class="fa icon-question hide"></i></label>
				<div class="col-sm-10">
					<#form:radio id="quyuxianzhi" name="quyuxianzhi" defaultValue="0" dictType="rt_quyuxianzhi" class="form-control" />
				</div>
			</div>
		</div>
	</form>
</script>
<script>
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	shrinkToFit: false,
	frozenCols: true,
	columnModel: [
		{header:'${text("设备号")}', name:'sn', index:'a.sn', width:300, align:"left", formatter: function(val, obj, row, act){
			if(row.isError){
				// return "<span style='color: #cccc77'>"+val+"</span>";
				return '<a style=\'color: #cccc77\' href="${ctx}/rt/rtError/list?sn='+row.sn+'" class="btnList" title="${text("'+val+'")}" >'+val+'</a>&nbsp;';
			}
			return val;
		}},
		{header:'${text("客户手机号")}', name:'icUser.mobile', index:'a.user_id', width:150, align:"center"},
		// {header:'${text("二维码")}', name:'icUser.mobile', index:'a.user_id', width:150, align:"center", formatter: function(val, obj, row, act){
		// 	return '<img src="https://llk.zzlmvip.com/js/userfiles/qrcode/32_BBJZ_C7BB5AB1403FA84D-DISKSN.png"/>';
		// }},

		{header:'${text("设备状态")}', name:'online', index:'a.online', width:150, align:"center", formatter: function(val, obj, row, act){
			var status = js.getDictLabel(${@DictUtils.getDictListJson('rt_online_code')}, val, '${text("未知")}', true);
			if(status=="离线"){
				return "<span style='color: red'>"+status+"</span>";
			}
			return js.getDictLabel(${@DictUtils.getDictListJson('rt_online_code')}, val, '${text("未知")}', true);
		}},
		{header:'${text("服务状态")}', name:'stage', index:'a.online', width:150, align:"center", formatter: function(val, obj, row, act){
			var status = js.getDictLabel(${@DictUtils.getDictListJson('device_stage')}, val, '${text("未知")}', true);
			return status;
		}},
		{header:'${text("mac")}', name:'mac', index:'a.id', width:150, align:"center"},
		{header:'${text("序列号")}', name:'xuliehao', index:'a.id', width:150, align:"center"},
		{header:'${text("渠道")}', name:'channelType', index:'a.id', width:150, align:"center", formatter: function(val, obj, row, act){
			return val==1?"点心":"麻雀";
		}},
		{header:'${text("设备架构")}', name:'model', index:'a.model', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('rt_model')}, val, '${text("未知")}', true);
		}},
		{header:'${text("区域限制")}', name:'quyuxianzhi', index:'a.quyuxianzhi', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('rt_quyuxianzhi')}, val, '${text("全国")}', true);
		}},
		{header:'${text("绑定用户")}', name:'bind', index:'a.bind', width:150, align:"left", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('rt_user_bind')}, val, '${text("未知")}', true);
		}},
		{header:'${text("设备创建时间")}', name:'createTime', index:'a.create_time', width:150, align:"center"},
		{header:'${text("是否冻结")}', name:'', index:'a.frozen', width:150, align:"left", formatter: function(val, obj, row, act){
			return row.frozen==0?"否":"是";
		}},
		{header:'${text("实时上行")}', name:'flow', index:'a.flow', width:150, align:"left"},
		{header:'${text("实时下行")}', name:'flowDownload', index:'a.flow_download', width:150, align:"left"},
		{header:'${text("备注")}', name:'remark', index:'a.remark', width:150, align:"left"},
		{header:'${text("拨号类型")}', name:'netType', index:'a.net_type', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('rt_net_type')}, val, '${text("未知")}', true);
		}},
		{header:'${text("拨号结果")}', name:'dialResult', index:'a.dial_result', width:150, align:"left"},
		{header:'${text("白名单")}', name:'whiteList', index:'a.white_list', width:150, align:"left", formatter: function(val, obj, row, act){
				return js.getDictLabel(${@DictUtils.getDictListJson('sys_yes_no')}, val, '${text("未知")}', true);;
		}},
		{header:'${text("测速总带宽")}', name:'uploadSpeed', index:'a.upload_speed', width:150, align:"left"},
		{header:'${text("刷新时间")}', name:'refreshTime', index:'a.upload_speed', width:150, align:"left"},
		{header:'${text("设备类型")}', name:'deviceType', index:'a.device_type', width:150, align:"center", formatter: function(val, obj, row, act){
			return val==1?"盒子":"APK";
		}},
		{header:'${text("操作")}', name:'actions',frozen:true, width:380, formatter: function(val, obj, row, act){
			var actions = [];
			actions.push('<a href="${ctx}/rt/rtDevice/delete?id='+row.id+'" class="btnList" title="${text("删除路由器设备")}" data-confirm="${text("确认要删除该路由器设备吗？")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
			actions.push('<a href="${ctx}/rt/rtDeviceLine/form?sn='+row.sn+'" class="btnList" title="${text("网络信息")}" >网络信息</a>&nbsp;');
			actions.push('<a href="${ctx}/rt/rtDeviceHardware/form?sn='+row.sn+'" class="btnList" title="${text("硬件信息")}" >硬件信息</a>&nbsp;');
			actions.push('<a href="${ctx}/rt/rtDeviceBohao/list?sn='+row.sn+'" class="btnList" title="${text("网络信息")}" >拨号信息</a>&nbsp;');
			actions.push('<a href="#" onclick="maskCode(\''+row.id+'\')" class="" title="${text("生成二维码")}" >二维码</a>&nbsp;');
			actions.push('<a href="#" onclick="setQuyu(\''+row.id+'\',\''+row.quyuxianzhi+'\')" class="" title="${text("生成二维码")}" >设置区域</a>&nbsp;');
			if(row.isError){
				actions.push('<a href="${ctx}/rt/rtError/list?sn='+row.sn+'" class="btnList" title="${text("报警信息")}" >报警信息</a>&nbsp;');
			}
			return actions.join('');
		}}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		
	}
});

var refreshEnable = true;
function shuaxin(){
	if(!refreshEnable){
		return;
	}

	// http://localhost:8040/deviceJob/synDeviceList
	refreshEnable = false;
	$.post("${ctx}/lingwu/synDeviceList",{},function (data){
		js.showMessage(data.message);
	})
	setTimeout(function (){
		refreshEnable = true;
	},2000)
}

var refreshEnableLine = true;
function shuaxinLine(){
	if(!refreshEnableLine){
		return;
	}
	refreshEnableLine = false;
	$.post("${ctx}/lingwu/flowDeviceNetInfo",{},function (data){
		js.showMessage(data.message);
	})
	setTimeout(function (){
		refreshEnableLine = true;
	},2000)
}

function maskCode(id){
	console.log(id);
	$.post('${ctx}/rt/rtDevice/maskCode',{id},function (res){
		if(res.data){
			$("#tupian").attr("src",res.data);
			js.layer.open({
				type: 2,
				title: '二维码',
				shadeClose: true,
				shade: false,
				maxmin: true, //开启最大化最小化按钮
				area: ['500px', '700px'],
				content: "${ctx}/rt/rtDevice/qrcode?id="+id
			});
			/*js.layer.open({
				type: 1,
				area: ['500px','600px'],
				title: '${text("二维码")}',
				resize: false,
				scrollbar: true,
				//title: false, //是否显示标题
				content: js.template('tanchuang'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
				btn: ['<i class="fa fa-check"></i> ${text("下载")}',
					'<i class="fa fa-remove"></i> ${text("关闭")}'],
				success: function(layero, index){
					layero.find('#tupian').attr("src",res.data);
				},
				btn1: function(index, layero){

					//iframe 层


					// window.location = res.data;
					// window.print();
					// var myWindow = window.open('','','width=1000,height=1000,top=0,left=0,toolbar=no,menubar=no,location=no,status=yes');
					// myWindow.document.write('<div style="display: flex;width: 500px;height: 600px;border: 0px;">' +
					// 		'<div style="margin: auto;width: 10px;height: 50px;border: 0px;">' +
					// 		'<img src="'+ res.data +'" style="margin: auto;width: 800px;height: 600px;"/></div></div>');
					return false;
				}
			})*/
			// window.location = res.data;
			// js.layer.photos({
			// 	photos: {
			// 		"title": "抓拍图片", //相册标题
			// 		"id": 123, //相册id
			// 		"start": 0, //初始显示的图片序号，默认0
			// 		"data": [   //相册包含的图片，数组格式
			// 			{
			// 				"src": res.data, //原图地址
			// 				"thumb": res.data //缩略图地址
			// 			}
			// 		]
			// 	},
			// 	tab: function(pic, layero){
			// 		console.log(pic) //当前图片的一些信息
			// 	}
			// });
		}
	})
}
</script>
<script>
	function setQuyu(id){
		js.layer.open({
			type: 2,
			title: '设置区域限制',
			shadeClose: true,
			shade: false,
			maxmin: true, //开启最大化最小化按钮
			area: ['600px'],
			content: "${ctx}/rt/rtDevice/setQuyushezhiForm?id="+id
		});
	}
</script>